// SYNTAX TEST "source.slint" "Example code test"

  import { DemoPalette, PageX as Page } from "common.slint";
//^^^^^^ keyword.other.import.slint
//         ^^^^^^^^^^^ entity.name.type.import-list.slint
//                            ^^ keyword.other.as.slint
//                                           ^^^^^^^^^^^^^^ string.quoted.double.import-path.slint

  // re-export
//^^^^^^^^^^^^ comment.line.double-slash.slint
  export { PrinterQueue, PrinterSettings, Foo as Bar }
//^^^^^^ keyword.other.export.slint
//                                        ^^^ entity.name.type.export-list.slint
//                                            ^^ keyword.other.as.slint
//                                               ^^^ entity.name.type.export-list.slint

  /* Block comment */
//^^^^^^^^^^^^^^^^^^^ comment.block.slint
  struct InkLevel {
//^^^^^^ keyword.declaration.struct.slint
//       ^^^^^^^^ entity.name.type.struct.slint
      color: color,
//    ^^^^^ variable.other.struct.field.slint
//           ^^^^^ entity.name.type.struct.field.slint
      level: percent,
//    ^^^^^ variable.other.struct.field.slint
//           ^^^^^^^ entity.name.type.struct.field.slint
  }

  export global Globus {
//^^^^^^ keyword.other.export.slint
//       ^^^^^^ keyword.other.global.slint
//              ^^^^^^ entity.name.type.global.slint
  }

  component SideBarIcon inherits Rectangle {
//^^^^^^^^^ keyword.other.component.slint
//          ^^^^^^^^^^^ entity.name.type.component.slint
//                      ^^^^^^^^ keyword.other.inherits.slint
//                               ^^^^^^^^^ entity.other.inherited-class.component.slint

      in-out property <bool> active;
//    ^^^^^^ keyword.other.visibility.slint
//           ^^^^^^^^ keyword.other.property.slint
//                     ^^^^ entity.name.type.property.slint
//                           ^^^^^^ variable.other.property.slint

      pure callback activate;
//    ^^^^ keyword.other.pure.slint
//         ^^^^^^^^ keyword.other.function.slint
//                  ^^^^^^^^ entity.name.function.slint

      width: DemoPalette.side-bar-width;
//    ^^^^^ variable.other.property.slint
      height: 72px;
//    ^^^^^^ variable.other.property.slint
//            ^^^^ constant.numeric.slint

      states [
//    ^^^^^^ keyword.other.states.slint
          expanded when root.expanded : {
//                 ^^^^ keyword.other.when.slint
              height: layout.min-height;

              in {
//            ^^ keyword.other.state-change.slint
                  animate height { duration: 200rem; easing: ease; }
//                ^^^^^^^ keyword.other.animate.slint
//                        ^^^^^^ variable.other.property.slint
//                                 ^^^^^^^^ keyword.other.animate.setting.slint
//                                           ^^^^^^ constant.numeric.slint
//                                                   ^^^^^^ keyword.other.animate.setting.slint
              }
              out {
//            ^^^ keyword.other.state-change.slint
              }
          }
      ]

      if false:id:=Rectangle {
//    ^^ keyword.control.conditional-element.slint
//       ^^^^^ constant.language.boolean.slint
//             ^^ entity.name.tag.element-id.slint
//                 ^^^^^^^^^ entity.name.type.element.slint
          i := Image {
//        ^ entity.name.tag.element-id.slint
//          ^^ punctuation.assignment.element-id.slint
//             ^^^^^ entity.name.type.element.slint
              colorize: root.active ? DemoPalette.active-page-icon-color : DemoPalette.inactive-page-icon-color;
//            ^^^^^^^^ variable.other.property.slint
              animate colorize { duration: 125ms; }
//            ^^^^^^^ keyword.other.animate.slint
//                               ^^^^^^^^ keyword.other.animate.setting.slint
//                                         ^^^^^ constant.numeric.slint
          }
          clicked => { }
//        ^^^^^^^ entity.name.function.slint
      }


      for page-icon[idx] in [
//    ^^^ keyword.control.repeated-element.slint
          @image-url("images/home.svg"),
//        ^^^^^^^^^^ support.function.macro.slint
//                   ^^^^^^^^^^^^^^^^^ string.quoted.double.slint
      ]: SideBarIcon { }

      if true: Rectangle {
//    ^^ keyword.control.conditional-element.slint
//       ^^^^ constant.language.boolean.slint
//             ^^^^^^^^^ entity.name.type.element.slint
          i := Image {
//        ^ entity.name.tag.element-id.slint
//          ^^ punctuation.assignment.element-id.slint
//             ^^^^^ entity.name.type.element.slint
              colorize: root.active ? DemoPalette.active-page-icon-color : DemoPalette.inactive-page-icon-color;
//            ^^^^^^^^ variable.other.property.slint
              animate colorize { duration: 125ms; }
//            ^^^^^^^ keyword.other.animate.slint
//                               ^^^^^^^^ keyword.other.animate.setting.slint
//                                         ^^^^^ constant.numeric.slint
          }
          clicked => { root.activate(); }
//        ^^^^^^^ entity.name.function.slint
      }

  }

